<template>
  <dv-full-screen-container>
    <div class="box1">
      <dv-border-box-1 class="box">
        <span class="title">图书借阅排行榜</span>
        <hotBook/>
      </dv-border-box-1>
      <dv-border-box-1 class="box">
        <span class="title">图书丢失数量变化</span>
        <bookLostCount/>
      </dv-border-box-1>
      <dv-border-box-1 class="box">
        <span class="title">作者借阅排行榜</span>
        <authorBorrow/>
      </dv-border-box-1>
    </div>
    <div class="box2">
      <dv-border-box-1>
        <span class="title">图书借阅数量变化</span>
        <bookLendChange/>
      </dv-border-box-1>
      <dv-border-box-1>
        <span class="title">图书库存数量变化</span>
        <bookCountChange/>
      </dv-border-box-1>
    </div>
    <!--    <dv-border-box-1 class="box">-->
    <!--      <span class="title">图书借出数量变化</span>-->
    <!--      <bookBorrowCount/>-->
    <!--    </dv-border-box-1>-->
    <!--        <dv-border-box-1 class="box">-->
    <!--          <span class="title">逾期归还率</span>-->
    <!--          <backLater/>-->
    <!--        </dv-border-box-1>-->
  </dv-full-screen-container>
</template>

<script>
import hotBook from '@/views/system/dataCharts/hotBook/index.vue'
import authorBorrow from '@/views/system/dataCharts/authorBorrow/index.vue'
import backLater from '@/views/system/dataCharts/backLater/index.vue'
import bookCountChange from '@/views/system/dataCharts/bookCountChange/index.vue'
import bookLostCount from '@/views/system/dataCharts/bookLostCount/index.vue'
import bookLendChange from '@/views/system/dataCharts/bookLendChange/index.vue'

export default {
  components: { bookLendChange, bookLostCount, hotBook, authorBorrow, backLater, bookCountChange }
}
</script>

<style scoped lang="scss">
#dv-full-screen-container {
  background: url("../../../assets/images/bg.png");
  position: relative;
  width: 100% !important;
  height: 100vh !important;
  display: grid;
  grid-template-rows: 1fr 1fr;

  .box1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .box2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .left, .right, .middle {
    width: 33.33%;
    display: flex;
    flex-direction: column;
  }

  ::v-deep .border-box-content {
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .title {
    position: absolute;
    color: #FFFFFF;
  }
}
</style>
